<template>
	<view v-if="pintuan.length > 0" class="pintuan-box">
		<view class="pintuan-title">
			<text></text>
			<text>拼团促销每日更新</text>
			<text class="iconfont iconright"  @click="entryPintuanList()" >查看更多</text>
		</view>		
		<view class="pintuan-goods-box">
			<block  v-for="(item, index) in pintuan" :key="index" >
				<view class="pintuan-goods" @click="entryPintuanDetail(item.goods_id)">				
					<view class="goods-img">
						<image :src="$util.img(item.pic_cover_small)" mode="aspectFit"></image>
					</view>
					<text class="goods-name">{{ item.goods_name }}</text>
					<view class="pintuan-price">
						<text>￥{{ item.tuangou_money }}</text>		
						<text>￥{{ item.promotion_price }}</text>										
					</view>
				</view>
			</block>
		</view>
	</view>	
</template>

<script>
import http from 'common/js/http.js';
export default{
	name: 'diy-pintuan',
	mixins: [http],
	props: {
		value: {
		}
	},
	data(){
		return {
			pintuan : [],
		}
	},
	created() {
		this.getPintuanList();
	},
	methods:{
		getPintuanList(){
			let condition = JSON.stringify({
				'npg.is_open': 1,
				'npg.is_show': 1
			});
			this.sendRequest({
				url: 'NsPintuan.Pintuan.goodsList',
				data: {
					page_size : 4,
					condition : condition,
					order : "npg.create_time desc"
				},
				success: res => {
					let data = res.data;
					if(data.data.length > 0){
						this.pintuan = data.data;
					}
				}
			})
		},
		entryPintuanDetail(goodsId){
			this.$util.redirectTo('/promotionpages/pintuan/detail/detail', { goods_id: goodsId });
		},
		
		entryPintuanList(){
			this.$util.redirectTo('/promotionpages/pintuan/list/list');
		}
	}
}
</script>

<style lang="scss">
	.pintuan-box{
		background: #fff;
		padding: 0rpx 20rpx;
		overflow: hidden;
		.pintuan-title{
			padding:20rpx 0rpx 10rpx 0rpx;
			text:nth-child(1){
				background:url() center no-repeat;
				background-size:100% 100%;
				width: 160rpx;
				height: 35rpx;
				display: block;
				margin-bottom: 4rpx;
			};
			text:nth-child(2){
				font-size: 24rpx;
				color:#ccc
			}
			.iconfont{
				position: absolute;
				right: 20rpx;
				font-size: 24rpx;
				padding-right: 28rpx;
				color: #ff0036;
				line-height: 0rpx;
			};
			.iconfont:before {
			position: absolute;
			right: 0px;		
			}
		}
		.pintuan-goods-box{
			.pintuan-goods{
				width:163rpx;
				float:left;
				margin-right: 20rpx;
				.goods-name{
					display: block;
					font-weight: bold;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
					font-size:24rpx;
					margin-top: 8rpx;
				}
				.pintuan-price{							
					width: 100%;	
					text:nth-child(1){
						display:block;
						color:#ff0036;
						font-size: 26rpx;
					}
					text:nth-child(2){
						display:block;
						font-size: 24rpx;
						color:#898989;
						text-decoration: line-through;
					}
				};
				.goods-img{
					width:100%;
					height: 163rpx;
					overflow:hidden;
					border: 1rpx solid #ebebeb;
					padding: 1rpx;
					image{
						width: 100%;;
						height:100%;
					}
				}
			}
			.pintuan-goods:nth-child(4){
				margin-right: 0rpx;
			}
		}
		.pintuan-more{
			width:80rpx;
			height: 278rpx;
			background:#fe5775;	
			float: right;
			border-radius: 11px;
			position: relative;
			margin-top:10rpx;
			text:nth-child(1){
				position: absolute;
				color:#fff;	
				top: 20rpx;
				left: 32rpx;
				font-size: 24rpx;
				display: block;
				width: 1rpx;
				
			}
			.iconfont{
				background:#fff;
				color:#fe5775;
				border-radius:25px;
				position:relative;
				top: 215rpx;
				left: 32rpx;
				font-size: 26rpx;
			}
		}
	}
	
</style>
